<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>文件上传</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <!-- uni 的 SDK，必须引用。 -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js">
    </script>

    <style>
        svg {
            margin-top: -100px;
        }

        div {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #007aff;
            padding: 12px 70px;
            overflow: hidden;
            text-decoration: none;
            text-indent: 0;
            border-radius: 20px;
            color: #fff;
            font-size: 13px;
            margin-top: 70px;

        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <p style="margin-top: 20px;" id="status"></p>
        <p v-if="upLoadProgress > 0">上传进度: {{upLoadProgress}}%</p>
        <a href="javascript:;" class="file gradient">选择文件
            <input id="upload" type="file" name="upload" @change="changeExcel($event)">
        </a>
        <p style="color: #ccc; font-size: 12px;" id="content">选择文件开始上传</p>
    </div>
</body>
<script>
    function viewPort() {
        const meta = document.querySelector('meta[name="viewport"]');
        const scale = window.screen.width / 375 < 1 ? 1 : window.screen.width / 375;
        meta.content = `width=device-width,initial-scale=${scale}`
    }
    viewPort()
    window.onresize = viewPort;

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
        var r = window.location.search.substr(1).match(reg)
        if (r != null) return unescape(r[2])
        return null
    }
    var uploadUrl = getUrlParam('url'); 
    var accessToken = getUrlParam('accessToken');
    new Vue({
        el: '#app',
        data: {
            imgPath: '',
            upLoadProgress: 0,
        },
        components: {

        },
        methods: {

            changeExcel(ev) {
                const files = ev.target.files;
                console.log(ev, files);
                if (files.length < 0) {
                    document.getElementById("status").innerHTML = '请选择文件';
                    return false;
                } else {
                    let param = new FormData(); //创建form对象
                    param.append('file', files[0], files[0].name); //通过append向form对象添加数据
                    let fileReader = new FileReader()
                    console.log("get uploadUrl:", uploadUrl);
                    console.log("get uploadUrl:", accessToken);
                    axios({
                        url: uploadUrl,
                        method: 'POST',
                        data: param,
                        headers: {
                            Authorization: accessToken
                        },
                        onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
                            if (progressEvent.lengthComputable) {
                                //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
                                //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
                                upLoadProgress = progressEvent.loaded / progressEvent.total * 100 //实时获取上传进度
                            }
                        }
                    }).then(
                        res => {
                            if (res.data && res.data.code == 200) {
                                console.log("get res:", res);
                                document.getElementById("status").innerHTML = '上传成功';
                                wx.miniProgram.postMessage({
                                    data: {
                                        fileName: res.data.data.fileName,
                                        fileUrl: res.data.data.url
                                    }
                                })
                                setTimeout(() => {
                                    wx.miniProgram.navigateBack()
                                }, 500)
                            }

                        }, error => {
                            document.getElementById("status").innerHTML = '上传失败';
                        })
                }
            }
        }
    })

</script>



</html>